// npm install --save-dev  image-webpack-loader
// npm i uglifyjs-webpack-plugin -D
// npm i webpack -D
// npm i webpack-bundle-analyzer -D
// const path = require('path');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉注释

// 需要在package.json里面配置
const isProduction = process.env.NODE_ENV === 'production';

// function resolve(dir) {
//     return path.join(__dirname, dir)
// }

module.exports = {
    //选项
    // publicPath:'/hello' // 部署应用包时的基本URL。默认是 '/'   配置后url就变成http://127.0.0.1:8080/hello了
    publicPath: '/',
    //打包时的输出文件夹,默认为dist
    outputDir: process.env.outputDir,
    //放置生成的静态资源（js，css，img，fonts）的（相对于outputDir的）目录
    assetsDir: './static',
    //指定生成的index.html的输出路径，（相对于outputDir）。也可以是一个绝对路径
    indexPath: 'index.html',
    //默认情况下，生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。 默认不需要关闭
    filenameHashing: true,
    //多页打包,生成多个页面，需要在此配置
    pages: undefined,
    //是否开启eslint。 eslint：是一个检查代码的工具
    lintOnSave: false,
    //是否运行时构建版本
    runtimeCompiler: false,
    //生产环境是否生成sourceMap文件  启动之后浏览器控制台可以明确告诉我们哪个文件错误，而不是一个哈希的文件名字
    productionSourceMap: true,
    //配置webpack 添加需要的插件
    configureWebpack: config => {
        const plugins = [];
        if (isProduction) {
            /*
                        plugins.push(
                            new UglifyJsPlugin({
                                uglifyOptions: {
                                    output: {
                                        comments: false, // 去掉注释
                                    },
                                    warnings: false,
                                    compress: {
                                        drop_console: true,
                                        drop_debugger: false,
                                        pure_funcs: ['console.log']//移除console
                                    }
                                }
                            }))
                        // 服务器也要相应开启gzip
                        plugins.push(
                            new CompressionWebpackPlugin({
                                algorithm: 'gzip',
                                test: /\.(js|css)$/,// 匹配文件名
                                threshold: 10000, // 对超过10k的数据压缩
                                deleteOriginalAssets: false, // 不删除源文件
                                minRatio: 0.8 // 压缩比
                            })
                        )

                        //只打包改变的文件
                        plugins.push(
                            new HashedModuleIdsPlugin()
                        )

                        // 开启分离js
                        config.optimization = {
                            runtimeChunk: 'single',
                            splitChunks: {
                                chunks: 'all',
                                maxInitialRequests: Infinity,
                                minSize: 1000 * 60,
                                cacheGroups: {
                                    vendor: {
                                        test: /[\\/]node_modules[\\/]/,
                                        name(module) {
                                            // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
                                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                            return `npm.${packageName.replace('@', '')}`
                                        }
                                    }
                                }
                            }
                        };
                    // 取消webpack警告的性能提示
                    config.performance = {
                        hints: 'warning',
                        //入口起点的最大体积
                        maxEntrypointSize: 1000 * 500,
                        //生成文件的最大体积
                        maxAssetSize: 1000 * 1000,
                        //只给出 js 文件的性能提示
                        assetFilter: function (assetFilename) {
                            return assetFilename.endsWith('.js');
                        }
                    }
                    // 打包时npm包转CDN
                    config.externals = externals;

            */
        }
        return plugins;
    },
    chainWebpack: config => {
        config.optimization.delete('splitChunks')
        // config.resolve.alias
        //     .set('@', resolve('src'))

        // 压缩图片
        // config.module
        //     .rule('images')
        //     .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        //     .use('image-webpack-loader')
        //     .loader('image-webpack-loader')
        //     .options({bypassOnDebug: true})
    },
    // css: {
    //     loaderOptions: {
    //         postcss: {
    //             plugins: [require('tailwindcss'), require('autoprefix')]
    //         }
        // }
    // },
    //代理
    devServer: {
        open: false, // 自动启动浏览器
        host: '0.0.0.0', // localhost
        port: 8080, // 端口号
        https: false,
        hotOnly: false, // 热更新
        proxy: {
            '/wiki': {
                // secure:false, //如果是https接口，需要配置这个参数
                target: process.env.VUE_APP_WIKI,
                ws: true, //开启websocket
                changeOrigin: true,
                pathRewrite: {
                    '^/wiki':''
                }
            },
        }
    }
}
